<template>
  <div class="stepDiv">
    <ul class="stepBox" :style="'transform: translateY(' + moveNum + 'vh)'">
      <li class="stepItem" v-for="(item, index) in showList" :key="index">
        <div class="allDiv" :class="{ active: item.done }">
          <div class="line" v-if="index != showList.length - 1"></div>
          <div class="drop"></div>
          <div class="wrapper">
            <div class="top">
              <span>{{ item.date }}</span>
              <span style="margin-left: 20px;">{{ item.time }}</span>
              <span class="yjSpan">{{ item.span }}</span>
            </div>
            <div class="bottom">
              <span>{{ item.title }}{{ (602.1 - item.num).toFixed(1) }}m</span>
              <!-- <span style="margin-left: 20px;">{{ item.num }}</span> -->
              <!-- <span class="yjSpan">{{ item.span }}</span> -->
            </div>
          </div>
        </div>
      </li>

    </ul>
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const showList: any = ref([]);
const addList = ref([
  {
    date: "2024年05月17日",
    time: '04:10:12',
    title: "坝前实测水位581.1m，距离坝顶",
    num: 581.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: '04:30:13',
    title: "坝前实测水位582.7m，距离坝顶",
    num: 582.7,
    done: true
  },
  {
    date: "2024年05月17日",
    time: '04:50:26',
    title: "坝前实测水位584.8m，距离坝顶",
    num: 584.8,
    done: true
  },

  {
    date: "2024年05月17日",
    time: '05:10:22',
    title: "坝前实测水位586.3m，距离坝顶",
    num: 586.3,
    done: true
  },

  {
    date: "2024年05月17日",
    time: '05:30:55',
    title: "坝前实测水位588.9m，距离坝顶",
    num: 588.9,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "05:50:30",
    title: "坝前实测水位590.3m，距离坝顶",
    num: 590.3,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "06:10:20",
    title: "坝前实测水位591.0m，距离坝顶",
    num: 591.0,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "06:30:18",
    title: "坝前实测水位593.2m，距离坝顶",
    num: 593.2,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "06:50:03",
    title: "坝前实测水位595.4m，距离坝顶",
    num: 595.4,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "06:52:09",
    title: "坝前实测水位597.0m，距离坝顶",
    num: 597.0,
    span: "预警水位",
    done: true
  },
  {
    date: "2024年05月17日",
    time: "07:10:17",
    title: "坝前实测水位597.7m，距离坝顶",
    num: 597.7,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "07:30:14",
    title: "坝前实测水位598.4m，距离坝顶",
    num: 598.4,
    done: true
  },
  {
    date: "2024年05月17日",
    time: " 07:50:53",
    title: "坝前实测水位599.1m，距离坝顶",
    span: "设计水位",
    num: 599.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "08:10:46",
    title: "坝前实测水位599.6m，距离坝顶",
    num: 599.6,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "08:30:22",
    title: "坝前实测水位600.0m，距离坝顶",
    num: 600.0,
    span: "校核水位",
    done: true
  },
  {
    date: "2024年05月17日",
    time: "08:50:32",
    title: "坝前实测水位600.7m，距离坝顶",
    num: 600.7,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "09:10:28",
    title: "坝前实测水位601.5m，距离坝顶",
    num: 601.5,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "09:30:59",
    title: "坝前实测水位 602.1m，距离坝顶",
    num: 602.1,
    span: "漫坝",
    done: true
  },
  {
    date: "2024年05月17日",
    time: "09:50:01",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "09:59:36",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "10:10:12",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "10:30:25",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "10:50:33",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "11:10:43",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "11:30:57",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "11:50:20",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "12:10:10",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "12:30:03",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "12:50:22",
    title: "坝前实测水位595.4m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "13:10:46",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "13:30:22",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "13:50:10",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
  {
    date: "2024年05月17日",
    time: "14:10:16",
    title: "坝前实测水位602.1m，距离坝顶",
    num: 602.1,
    done: true
  },
]);
const addNum = ref(0);
const moveNum = ref(0);

onMounted(() => {
  setInterval(() => {
    if (addNum.value > 7) {
      moveNum.value -= 10
    }
    showList.value[addNum.value] = addList.value[addNum.value];
    addNum.value++;
  }, 4000);
});

</script>

<style lang="less" scoped>
.stepDiv {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .stepBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .stepItem {

      .allDiv {
        height: 10vh;
        position: relative;

        .line {
          position: absolute;
          left: 4px;
          height: 100%;
          border-left: 2px solid #e4e7ed;
        }

        .drop {
          left: -1px;
          width: 12px;
          height: 12px;
          position: absolute;
          background-color: #e4e7ed;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .wrapper {
          position: relative;
          padding-left: 50px;
          top: -7px;

          .yjSpan {
            color: #ef6715;
            font-size: 22px;
            font-family: "YSBTH";
            cursor: pointer;
            margin-left: 20px;
          }
        }
      }

      .active {
        .drop {
          background-color: #0668f2;
        }

        .line {
          border-color: #0668f2;
        }
      }
    }
  }
}
</style>
